<template>
  <el-dialog title="试题预览" :visible="show" @close="handleClose">
    <el-row>
      <el-col :span="6"
        >【题型】:{{ dialogData.questionType | formatQT }}</el-col
      >
      <el-col :span="6">【编号】:{{ dialogData.id }}</el-col>
      <el-col :span="6"
        >【难度】:{{ dialogData.difficulty | formatDifficulty }}</el-col
      >
      <el-col :span="6">【标签】:{{ dialogData.tags }}</el-col>
      <el-col :span="6">【学科】:{{ dialogData.subjectName }}</el-col>
      <el-col :span="6">【目录】:{{ dialogData.directoryName }}</el-col>
      <el-col :span="6">【方向】:{{ dialogData.direction }}</el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="24"
        >【题干】:
        {{ dialogData.questionType | formatQT }}
        <div
          v-if="
            +dialogData.questionType === 2 || +dialogData.questionType === 1
          "
        >
          选项: (以下选中的选项为正确答案)
        </div>
        <div v-if="+dialogData.questionType === 1">
          <el-radio
            v-for="item in dialogData.options"
            :key="item.id"
            :value="radio"
            :label="item.code"
            class="radio"
            >{{ item.title }}</el-radio
          >
        </div>
        <div v-else-if="+dialogData.questionType === 2">
          <el-checkbox-group :value="checkList">
            <el-checkbox
              v-for="item in dialogData.options"
              :key="item.id"
              :label="item.code"
              class="radio"
              >{{ item.title }}</el-checkbox
            >
          </el-checkbox-group>
        </div>
        <div v-else></div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    【参考答案】:
    <el-button type="danger" size="small" @click="handleVideo"
      >视频答案预览</el-button
    >
    <vueMiniPlayer
      style="margin-top: 20px; width: 400px; height: 270px"
      v-show="videoShow"
      ref="vueMiniPlayer"
      :video="video"
      :mutex="true"
      @fullscreen="handleFullscreen"
    />
    <el-divider></el-divider>
    <span>【答案解析】:<span v-html="dialogData.answer"></span></span>
    <el-divider></el-divider>
    【题目备注】:
    <p>{{ dialogData.remarks }}</p>
    <template #footer>
      <el-button type="primary" @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      dialogData: {
        addDate: '', // 创建日期
        answer: '', // 答案解析
        catalog: null, //
        catalogID: '', // 目录
        city: '', // 城市
        creator: '', //
        creatorID: '', // 录入人
        difficulty: '', // 难度
        direction: '', // 方向
        enterprise: '', //
        enterpriseID: '', // 企业
        id: '', // 编号
        number: '', // 试题编号
        question: '', // 题干
        questionType: '', // 题型
        remarks: '', // 题目备注
        subject: '', //
        subjectID: '', // 学科
        tags: '', // 试题标签
        videoURL: '', // 解析视频
        options: [{}] // 选项
      },
      video: {
        url: '',
        cover: '',
        muted: false,
        loop: false,
        preload: 'auto',
        poster: '',
        volume: 1,
        autoplay: false
      },
      videoShow: false
    }
  },
  methods: {
    handleClose () {
      this.show = false
    },
    async getChoice (id) {
      const { data } = await detail({ id })
      this.dialogData = data
      this.video.url = data.videoURL
      this.show = true
    },
    handleFullscreen () {},
    handleVideo () {
      if (!this.dialogData.videoURL) {
        return this.$message('参考答案视频暂无')
      }
      this.videoShow = !this.videoShow
    }
  },
  filters: {
    formatDifficulty (val) {
      if (!val) {
        return
      }
      return difficulty.find((item) => item.value === +val).label
    },
    formatQT (val) {
      if (!val) {
        return
      }
      return questionType.find((item) => item.value === +val).label
    }
  },
  computed: {
    radio () {
      const res = this.dialogData.options.find((item) => item.isRight === 1)
      return res ? res.code : ''
    },
    checkList () {
      const arr = []
      this.dialogData.options.forEach((item) => {
        if (item.isRight === 1) {
          arr.push(item.code)
        }
      })
      return arr
    }
  }
}
</script>
